<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>请完善您的信息2</title>
    <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" />
    <link href="__CDN__/assets/homecss/indexone.css" rel="stylesheet">
    <link href="__CDN__/assets/homecss/indextwo.css" rel="stylesheet">
    <script src="__CDN__/assets/homecss/jquery-1.8.2.min.js"></script>
    <script src="__CDN__/assets/homecss/Validator.js"></script>
    <script src="__CDN__/assets/homecss/layer/layer_zh-cn.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>

<div class="page-content">
    <div>
        <div>
            <div class="van-address-edit">
                <div class="van-cell van-field"><div class="van-cell__title van-field__label">
                    <span>姓名</span>
                </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <input type="text" id="username" placeholder="输入姓名" class="van-field__control">
                        </div>
                    </div>
                </div>
                <div class="van-cell van-field">
                    <div class="van-cell__title van-field__label">
                        <span>手机号</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <input type="tel" placeholder="输入手机号" id="userphone" class="van-field__control">
                            <button id="sendcode" class="van-button--small van-button--normal van-button--gray ">
                                <span class="van-button__text" id="codemsg">验证码</span>
                            </button>
                            <button id="sendcode2" class="van-button--small van-button--normal van-button--gray ">
                                <span class="van-button__text" id="codemsg2"></span>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="van-cell van-field"><div class="van-cell__title van-field__label">
                    <span>验证码</span>
                </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <input type="tel" id="usercode" placeholder="输入验证码" class="van-field__control">
                        </div>
                    </div>
                </div>



                <div class="van-address-edit__buttons">
                    <button id="confirminfo" class="van-button van-button--danger van-button--normal van-button--block">
                        <span class="van-button__text">完善信息</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script>
    $(function () {
        //验证信息是否合法
        $("#confirminfo").click(function () {
            var username = $("#username").val();
            if(username == ''){
               layer.msg("请输入姓名",{"time":1000});
               return;
            }
            var userphone = $("#userphone").val();
            var message = checkPhone(userphone);
            if( message != "success"){
                layer.msg(message,{"time":1000});
                return;
            }

            var usercode = $("#usercode").val();
            if(usercode == ''){
                layer.msg("请输入验证码",{"time":1000});
                return;
            }



        })

        //验证手机是否合法
        function checkPhone(userphone){
            // 电话包括移动 联通  电信
            var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(userphone == ''){
                message = "手机号码不能为空！";
            }else if(userphone.length !=11){
                message = "请输入有效的手机号码！";
                flag=false;
            }else if(!myreg.test(userphone)){
                message = "请输入有效的手机号码！";
            }else{
                message = "success";
            }
            return message;
        }
        //发送验证码
        $("#sendcode").click(function () {
            var userphone = $("#userphone").val();
            var message = checkPhone(userphone);
            if( message != "success"){
                layer.msg(message,{"time":1000});
                return;
            }

            getRandomCode();

            $("#codemsg").html(60);



        })

        //倒计时
        var time = 60;
        //倒计时
        function getRandomCode() {
            $("#sendcode2").css("display","block")
            $("#sendcode").css("display","none")
            $('#codemsg').text("验证码");
            if (time === 0) {
                time = 60;
                $("#sendcode").css("display","block")
                $("#sendcode2").css("display","none")
                return;
            } else {
                time--;
                $('#codemsg2').text(time);
            }
            setTimeout(function() {
                getRandomCode();
            },1000);


            }


    })

</script>
